<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>艾极光管理后台</title>
    <link rel="stylesheet" href="style.css">
    <!-- 引入Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <!-- 登录页面 -->
    <div id="login-container" class="login-container">
        <div class="login-box">
            <h2>艾极光后台登录</h2>
            <form id="login-form">
                <div class="form-group">
                    <label for="phone">手机号</label>
                    <input type="tel" id="phone" name="phone" required>
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" id="password" name="password" required>
                </div>
                <button type="submit" class="btn-login">登录</button>
                <div id="login-error" class="error-message"></div>
            </form>
        </div>
    </div>

    <!-- 主管理页面 -->
    <div id="admin-container" class="admin-container hidden">
        <!-- 顶部导航 -->
        <header class="header">
            <div class="header-left">
                <h1>艾极光管理后台</h1>
            </div>
            <div class="header-right">
                <span id="current-user">管理员</span>
                <button id="logout-btn" class="btn-logout">
                    <i class="fas fa-sign-out-alt"></i> 退出
                </button>
            </div>
        </header>

        <!-- 内容区域 -->
        <div class="content-wrapper">
            <!-- 侧边栏 -->
            <aside class="sidebar">
                <ul class="menu">
                    <li class="menu-item" data-view="dashboard">
                        <i class="fas fa-tachometer-alt"></i> 仪表盘
                    </li>
                    <li class="menu-item" data-view="articles">
                        <i class="fas fa-newspaper"></i> 文章管理
                    </li>
                    <li class="menu-item" data-view="banners">
                        <i class="fas fa-images"></i> 轮播图管理
                    </li>
                    <li class="menu-item" data-view="users">
                        <i class="fas fa-users"></i> 用户管理
                    </li>
                    <li class="menu-item" data-view="assessments">
                        <i class="fas fa-stethoscope"></i> 评估记录
                    </li>
                </ul>
            </aside>

            <!-- 主内容 -->
            <main class="main-content">
                <!-- 仪表盘 -->
                <div id="dashboard-view" class="view">
                    <div class="dashboard-cards">
                        <div class="card">
                            <div class="card-icon"><i class="fas fa-newspaper"></i></div>
                            <div class="card-content">
                                <div class="card-title">文章总数</div>
                                <div class="card-value" id="articles-count">0</div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-icon"><i class="fas fa-images"></i></div>
                            <div class="card-content">
                                <div class="card-title">轮播图数</div>
                                <div class="card-value" id="banners-count">0</div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-icon"><i class="fas fa-users"></i></div>
                            <div class="card-content">
                                <div class="card-title">用户总数</div>
                                <div class="card-value" id="users-count">0</div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-icon"><i class="fas fa-stethoscope"></i></div>
                            <div class="card-content">
                                <div class="card-title">评估记录</div>
                                <div class="card-value" id="assessments-count">0</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="recent-activities">
                        <h3>最近活动</h3>
                        <div id="activities-list">
                            <!-- 活动列表将通过JavaScript动态生成 -->
                        </div>
                    </div>
                </div>

                <!-- 文章管理 -->
                <div id="articles-view" class="view hidden">
                    <div class="view-header">
                        <h2>文章管理</h2>
                        <button id="add-article-btn" class="btn-add">
                            <i class="fas fa-plus"></i> 添加文章
                        </button>
                    </div>
                    <div class="table-container">
                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>标题</th>
                                    <th>发布日期</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="articles-table-body">
                                <!-- 文章数据将通过JavaScript动态生成 -->
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- 轮播图管理 -->
                <div id="banners-view" class="view hidden">
                    <div class="view-header">
                        <h2>轮播图管理</h2>
                        <button id="add-banner-btn" class="btn-add">
                            <i class="fas fa-plus"></i> 添加轮播图
                        </button>
                    </div>
                    <div class="table-container">
                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>图片</th>
                                    <th>链接</th>
                                    <th>排序</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="banners-table-body">
                                <!-- 轮播图数据将通过JavaScript动态生成 -->
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- 用户管理 -->
                <div id="users-view" class="view hidden">
                    <div class="view-header">
                        <h2>用户管理</h2>
                    </div>
                    <div class="table-container">
                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>手机号</th>
                                    <th>昵称</th>
                                    <th>是否管理员</th>
                                    <th>创建时间</th>
                                </tr>
                            </thead>
                            <tbody id="users-table-body">
                                <!-- 用户数据将通过JavaScript动态生成 -->
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- 评估记录 -->
                <div id="assessments-view" class="view hidden">
                    <div class="view-header">
                        <h2>评估记录</h2>
                    </div>
                    <div class="table-container">
                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>用户ID</th>
                                    <th>评估类型</th>
                                    <th>CAS评分</th>
                                    <th>状态</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="assessments-table-body">
                                <!-- 评估记录数据将通过JavaScript动态生成 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <!-- 模态框 -->
    <div id="modal" class="modal hidden">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="modal-title">添加文章</h3>
                <button id="close-modal" class="close-modal">&times;</button>
            </div>
            <div class="modal-body">
                <form id="modal-form">
                    <!-- 表单内容将通过JavaScript动态生成 -->
                </form>
            </div>
            <div class="modal-footer">
                <button id="cancel-modal" class="btn-cancel">取消</button>
                <button id="submit-modal" class="btn-submit">提交</button>
            </div>
        </div>
    </div>

    <script type="module" src="api.js"></script>
    <script type="module" src="main.js"></script>
</body>
</html>